<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
	<title>jTopo Demo</title>
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link href="../css/jquery.snippet.min.css" rel="stylesheet">
	
	<script src="../js/jquery.js"></script>
	<script src="../js/site.js"></script>
	<script src="../js/demo.js"></script>
	
	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
	
	<script type="text/javascript" src="js/jtopo-min.js"></script>
	<script type="text/javascript" src="js/toolbar.js"></script>
	
	<script id='code'>				
		$(document).ready(function(){					
			var canvas = document.getElementById('canvas');
			var stage = new JTopo.Stage(canvas);
			//显示工具栏
			showJTopoToobar(stage);

			var scene = new JTopo.Scene();	
			scene.backgroundColor = '0,0,0';
			
			for(var i= 0; i<30; i++){
				var node = new JTopo.Node();												
				node.setLocation(Math.random() * stage.width, Math.random()*stage.height);
				node.setSize(1+Math.random() * 100, 2+Math.random() * 100);
				
				var color = Math.floor(Math.random() * 255)
						+ ',' + Math.floor(Math.random() * 255)
						+ ',' + Math.floor(Math.random() * 255);
				node.fillStyle = color;

				scene.add(node);
			};
			
			stage.add(scene)

			var n = 0;
			
			scene.addEventListener('mouseup', function(event){
				console.log(event);			
				var node = event.target;
				if(node){
					JTopo.Animate.gravity(node, {
						dy: 2,
						stop:function(){
							var nodes = scene.childs;
							for(var i=0; i<nodes.length; i++){
								var s = nodes[i];
								if(s === node) continue;
								if(node.x+node.width >= s.x && node.x <= s.x+s.width &&
									node.y+node.height  > s.y && node.y+node.height - s.y < 3 && node.y+node.height <= s.y+s.height){
									return true;
								}
							}
							var isStoped = node.y + node.height > scene.height;
							return isStoped;
						}							
					}).start();
				}				
			});
		});
	</script>
  </head>

  <body>

	<center>
	<div class="wrap_div">
		<div class="head_nav">
			<h2 class="logo"><a href="index.html" title="jTopo">jTopo</a></h2>
		</div>		
		<div class="head_nav_second">			
			<ul class="menu" id="nav_menu">
			
			</ul>
		</div>
		<div class="content">
		  <div class="left">
			<ul id="menu">
			
			</ul>
		  </div>
		  <div class="right">
				<div id="content">					<canvas width="850" height="550" id="canvas"></canvas>	
					
				</div>
		  </div>
		  <div class="clear"></div>
		</div>
	</div>
	</center>
	<div class="footer">
		&nbsp;
	</div>
  
	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1000418207'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1000418207%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</body>

</html>